<template>
  <div class="page-box">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      label-width="88px"
      inline
    >
      <el-form-item label="科室" prop="param.department">
        <el-input
          style="width: 240px"
          v-model="queryParams.param.department"
          clearable
          placeholder="请输入科室"
        />
      </el-form-item>
      <el-form-item label="医生" prop="param.doctor">
        <el-input
          style="width: 240px"
          v-model="queryParams.param.doctor"
          clearable
          placeholder="请输入医生"
        />
      </el-form-item>
    </el-form>
    <!-- <div style="display: flex; height: 100%"> -->
    <!-- <div style="width: 120px; height: calc(100% - 50px)">
        <el-steps direction="vertical" :active="1">
          <el-step title="AIS静脉溶栓"></el-step>
          <el-step title="AIS介入再通"></el-step>
          <el-step title="脑出血"></el-step>
          <el-step title="颅内动脉瘤"></el-step>
          <el-step title="CEA"></el-step>
          <el-step title="CAS"></el-step>
        </el-steps>
      </div> -->
    <el-card class="page-box-card1">
      <!-- <el-card>
        <div
          slot="header"
          class="clearfix"
          style="display: flex; align-items: center"
        >
          <span>评估完成率</span>
          <div style="flex: 1"></div>
          <el-radio-group
            style="float: right; padding: 3px 0"
            v-model="radio2"
            size="small"
          >
            <el-radio-button label="周"></el-radio-button>
            <el-radio-button label="月"></el-radio-button>
            <el-radio-button label="季"></el-radio-button>
            <el-radio-button label="年"></el-radio-button>
          </el-radio-group>
        </div>
        <el-radio-group v-model="radio3" size="medium">
          <el-radio-button label="总览"></el-radio-button>
          <el-radio-button label="AIS静脉溶栓"></el-radio-button>
          <el-radio-button label="AIS介入再通"></el-radio-button>
          <el-radio-button label="脑出血"></el-radio-button>
          <el-radio-button label="颅内动脉瘤"></el-radio-button>
          <el-radio-button label="CEA"></el-radio-button>
          <el-radio-button label="CAS"></el-radio-button>
        </el-radio-group>
        <First style="margin-top: 16px" />
      </el-card> -->
      <el-card>
        <div
          slot="header"
          class="clearfix"
          style="display: flex; align-items: center"
        >
          <span>AIS静脉溶栓</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text"
          >操作按钮</el-button
        > -->
          <div style="flex: 1"></div>
          <el-radio-group
            style="float: right; padding: 3px 0; margin-right: 8px"
            v-model="jmrsRadio"
            @change="getJmrsData"
            size="small"
          >
            <el-radio-button label="0">周</el-radio-button>
            <el-radio-button label="1">月</el-radio-button>
            <el-radio-button label="2">季</el-radio-button>
            <el-radio-button label="3">年</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-model="jmrsTime"
            @change="getJmrsData"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          >
          </el-date-picker>
        </div>
        <Second ref="second" />
      </el-card>
      <el-card style="margin-top: 16px">
        <div
          slot="header"
          class="clearfix"
          style="display: flex; align-items: center"
        >
          <span>AIS介入再通</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text"
          >操作按钮</el-button
        > -->
          <div style="flex: 1"></div>
          <el-radio-group
            style="float: right; padding: 3px 0"
            @change="getJrztData"
            v-model="jrztRadio"
            size="small"
          >
            <el-radio-button label="0">周</el-radio-button>
            <el-radio-button label="1">月</el-radio-button>
            <el-radio-button label="2">季</el-radio-button>
            <el-radio-button label="3">年</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-model="jrztTime"
            @change="getJrztData"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          >
          </el-date-picker>
        </div>
        <Third ref="third" />
      </el-card>
      <el-card style="margin-top: 16px">
        <div
          slot="header"
          class="clearfix"
          style="display: flex; align-items: center"
        >
          <span>脑出血</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text"
          >操作按钮</el-button
        > -->
          <div style="flex: 1"></div>
          <el-radio-group
            style="float: right; padding: 3px 0"
            @change="getNaxData"
            v-model="naxRadio"
            size="small"
          >
            <el-radio-button label="0">周</el-radio-button>
            <el-radio-button label="1">月</el-radio-button>
            <el-radio-button label="2">季</el-radio-button>
            <el-radio-button label="3">年</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-model="naxTime"
            @change="getNaxData"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          >
          </el-date-picker>
        </div>
        <Fourth ref="fourth" />
      </el-card>
      <el-card style="margin-top: 16px">
        <div
          slot="header"
          class="clearfix"
          style="display: flex; align-items: center"
        >
          <span>颅内动脉瘤</span>
          <div style="flex: 1"></div>
          <el-radio-group
            style="float: right; padding: 3px 0"
            v-model="lndmlRadio"
            @change="getLndmlData"
            size="small"
          >
            <el-radio-button label="0">周</el-radio-button>
            <el-radio-button label="1">月</el-radio-button>
            <el-radio-button label="2">季</el-radio-button>
            <el-radio-button label="3">年</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-model="lndmlTime"
            @change="getLndmlData"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          >
          </el-date-picker>
        </div>
        <Fifth ref="fifth" />
      </el-card>
      <el-card style="margin-top: 16px">
        <div
          slot="header"
          class="clearfix"
          style="display: flex; align-items: center"
        >
          <span>CEA/CAS</span>
          <div style="flex: 1"></div>
          <el-radio-group
            style="float: right; padding: 3px 0"
            v-model="ceacasRadio"
            @change="getCeacasData"
            size="small"
          >
            <el-radio-button label="0">周</el-radio-button>
            <el-radio-button label="1">月</el-radio-button>
            <el-radio-button label="2">季</el-radio-button>
            <el-radio-button label="3">年</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-model="ceacasTime"
            @change="getCeacasData"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          >
          </el-date-picker>
        </div>
        <Sixth ref="sixth" />
      </el-card>
      <el-card style="margin-top: 16px">
        <div
          slot="header"
          class="clearfix"
          style="display: flex; align-items: center"
        >
          <span>脑梗死</span>
          <div style="flex: 1"></div>
          <el-radio-group
            style="float: right; padding: 3px 0"
            v-model="ngsRadio"
            @change="getNgsData"
            size="small"
          >
            <el-radio-button label="0">周</el-radio-button>
            <el-radio-button label="1">月</el-radio-button>
            <el-radio-button label="2">季</el-radio-button>
            <el-radio-button label="3">年</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-model="ngsTime"
            @change="getNgsData"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
          >
          </el-date-picker>
        </div>
        <Seventh ref="seventh" />
      </el-card>
    </el-card>
    <!-- </div> -->
  </div>
</template>
<script>
// import First from "./components/first";
import Second from "./components/second";
import Third from "./components/third";
import Fourth from "./components/fourth";
import Fifth from "./components/fifth";
import Sixth from "./components/sixth";
import Seventh from "./components/seventh";
import {
  queryJmrs,
  queryDntResult,
  querySichResult,
  queryXgzlLv,
  queryDptResult,
  queryRptResult,
  queryNcxLv,
  queryLndmlReslut,
  queryCeaCas
} from "@/api/quality/chart";
export default {
  components: {
    // First,
    Second,
    Third,
    Fourth,
    Fifth,
    Sixth,
    Seventh,
  },
  data() {
    return {
      queryParams: {
        param: {},
      },
      jmrsRadio: "0",
      jmrsTime: [],
      jrztRadio: '0',
      jrztTime: [],
      naxRadio: '0',
      naxTime: [],
      lndmlRadio: '0',
      lndmlTime: [],
      ceacasRadio: '0',
      ceacasTime: [],
      ngsRadio: '0',
      ngsTime: [],
      // jmrsData: [],
      radio2: "周",
      radio3: "总览",
    };
  },
  created() {
    this.getJmrsData();
    this.getJrztData();
    this.getNaxData();
    this.getLndmlData();
    this.getCeacasData();
    this.getNgsData();
  },
  methods: {
    getJmrsData() {
      const param = {
        endTime: this.jmrsTime && this.jmrsTime.length ? this.jmrsTime[0] : "",
        startTime: this.jmrsTime && this.jmrsTime.length ? this.jmrsTime[1] : "",
        timeType: this.jmrsRadio,
      };
      this.$nextTick(()=> {
        this.$refs.second.changeSearchVal(param);
      })
      queryJmrs(param).then((res) => {
        // this.jmrsData = [...res.data];
        this.$refs.second.refresh(res.data);
      });
      queryDntResult(param).then(res=> {
        this.$refs.second.changeOptions3(res.data);
      })
      querySichResult(param).then(res=> {
        this.$refs.second.changeOptions4(res.data);
      })
    },
    getJrztData() {
      const param = {
        endTime: this.jrztTime && this.jrztTime.length ? this.jrztTime[0] : "",
        startTime: this.jrztTime && this.jrztTime.length ? this.jrztTime[1] : "",
        timeType: this.jrztRadio,
      };
      this.$nextTick(()=> {
        this.$refs.third.changeSearchVal(param);
      })
      queryXgzlLv(param).then((res) => {
        // this.jmrsData = [...res.data];
        this.$refs.third.refresh(res.data);
      });
      queryDptResult(param).then(res=> {
        this.$refs.third.changeOptions3(res.data);
      })
      queryRptResult(param).then(res=> {
        this.$refs.third.changeOptions4(res.data);
      })
    },
    getNaxData() {
      const param = {
        endTime: this.naxTime && this.naxTime.length ? this.naxTime[0] : "",
        startTime: this.naxTime && this.naxTime.length ? this.naxTime[1] : "",
        timeType: this.naxRadio,
      };
      this.$nextTick(()=> {
        this.$refs.fourth.changeSearchVal(param);
      })
      queryNcxLv(param).then((res) => {
        // this.jmrsData = [...res.data];
        this.$refs.fourth.refresh(res.data);
      });
    },
    getLndmlData() {
      const param = {
        endTime: this.lndmlTime && this.lndmlTime.length ? this.lndmlTime[0] : "",
        startTime: this.lndmlTime && this.lndmlTime.length ? this.lndmlTime[1] : "",
        timeType: this.lndmlRadio,
      };
      queryLndmlReslut(param).then((res) => {
        // this.jmrsData = [...res.data];
        this.$refs.fifth.refresh(res.data);
      });
    },
    getCeacasData() {
      const param = {
        endTime: this.ceacasTime && this.ceacasTime.length ? this.ceacasTime[0] : "",
        startTime: this.ceacasTime && this.ceacasTime.length ? this.ceacasTime[1] : "",
        timeType: this.ceacasRadio,
      };
      queryCeaCas(param).then((res) => {
        // this.jmrsData = [...res.data];
        this.$refs.sixth.refresh(res.data);
      });
    },
    getNgsData() {
      const param = {
        endTime: this.naxTime && this.naxTime.length ? this.naxTime[0] : "",
        startTime: this.naxTime && this.naxTime.length ? this.naxTime[1] : "",
        timeType: this.naxRadio,
      };
      this.$nextTick(()=> {
        this.$refs.seventh.changeSearchVal(param);
      })
    },
  },
};
</script>
<style lang="scss">
.page-box-card1 {
  height: calc(100% - 50px);
  padding: 0 !important;
}
</style>
<style scoped>
/deep/ .page-box-card1 > .el-card__body {
  padding: 0 !important;
  background: #f8f8f8;
}
</style>
